@height-item: calc((100vh - 180px) / 8);
.transfrom-class {
  transition: 0.75s;
}
.font-style {
  font-size: 24px;
  color: white;
}
.middle-box {
  width: 100%;
  .transfrom-class();
  .middel-box-item {
    position: relative;
    height: @height-item;
    line-height: @height-item;
    display: flex;
    justify-content: flex-end;
    .font-style();
  }
  .middel-box-item-yellow1 {
    background-color: rgba(219, 142, 99, 0.8);
  }
  .middel-box-item-yellow2 {
    background-color: rgba(222, 132, 57, 0.8);
  }
  .middel-box-item-yellow3 {
    background-color: rgba(225, 135, 65, 0.8);
  }
  .middel-box-item-yellow4 {
    background-color: rgba(243, 181, 97, 0.8);
  }
  .middel-box-item-yellow5 {
    background-color: rgba(246, 197, 139, 0.8);
  }
  .middel-box-item-yellow6 {
    background-color: rgba(248, 192, 82, 0.9);
  }
  .middel-box-item-yellow7 {
    background-color: rgba(250, 163, 102, 0.9);
  }
  .middel-box-item-yellow8 {
    background-color: rgba(247, 153, 79, 0.5);
  }
  .middel-box-inner {
    height: @height-item;
    span {
      margin-left: 20px;
      margin-right: 24px;
    }
  }
  .middel-box-inner-yellow1 {
    width: 65%;
    background-color: rgba(246, 171, 101, 0.6);
  }
  .middel-box-inner-yellow2 {
    width: 53%;
    background-color: rgba(245, 174, 63, 0.8);
  }
  .middel-box-inner-yellow3 {
    width: 43%;
    background-color: rgba(245, 187, 81, 0.8);
  }
  .middel-box-inner-yellow4 {
    width: 35%;
    background-color: rgba(249, 189, 81, 0.8);
  }
  .middel-box-inner-yellow5 {
    width: 43%;
  }
  .middel-box-inner-yellow6 {
    width: 50%;
    position: absolute;
    left: 0;
    padding-left: 50%;
    background-color: rgba(247, 193, 69, 0.9);
  }
  .middel-box-inner-yellow7 {
    width: 60%;
    position: absolute;
    left: 0;
    padding-left: 35%;
    background-color: rgba(231, 151, 89, 0.9);
  }
  .middel-box-inner-yellow8 {
    width: 60%;
    position: absolute;
    left: 0;
    padding-left: 15%;
    background-color: rgba(228, 164, 77, 0.8);
  }
}
